'use strict';
import React, {PropTypes}from 'react';
import {
    View,
    TouchableOpacity,
    Image,
} from 'react-native';
import ViewPager from 'react-native-viewpager';

import Gallery from 'react-native-gallery';

class ImageViewer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            dataSource: new ViewPager.DataSource({
                pageHasChanged: (p1, p2) => p1 !== p2,
            }),
            images: [],
        };
    }

    componentDidMount() {
        this.props.source && this.setState({
            images: this.props.source,
            dataSource: this.state.dataSource.cloneWithPages(this.props.source)
        });
    }


    render() {
        return (
            <View style={{flex: 1, backgroundColor: 'black', paddingBottom: 30}}>
                <View
                    style={{
                        backgroundColor: 'rgba(255,255,255,0.3)',
                        height: 65,
                        alignItems: 'center',
                        flexDirection: 'row',
                        paddingTop: 20,
                    }}
                >
                    <TouchableOpacity
                        onPress={() => {
                            this.props.navigator.pop();
                        }}
                    >
                        <Image style={{width: 20, height: 20, marginLeft: 10,}}
                               source={require('../../Image/back_icon_white.png')}
                               resizeMode={'contain'}
                        />
                    </TouchableOpacity>
                </View>
                <Gallery
                    style={{flex: 1, backgroundColor: 'black'}}
                    images={this.state.images}
                    initialPage={0}
                />
            </View>
        )

    }

}

ImageViewer.propTypes = {
    source: PropTypes.array.isRequired,
};

export default ImageViewer;